<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width"/>
    <meta name="author" content="www.lzqcode.com"/>
    <meta name="robots" content="all"/>
    <title>我的博客</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="css/master.css"/>
    <link rel="stylesheet" href="css/gloable.css"/>
    <link rel="stylesheet" href="css/nprogress.css"/>
    <link rel="stylesheet" href="css/blog.css"/>

    <script src="/loginBack/js/jquery-2.1.4.min.js"></script>
    <script src="layui/layui.js"></script>
    <script src="js/yss/gloable.js"></script>
    <script src="js/plugins/nprogress.js"></script>
    <script>NProgress.start();</script>
    <script src="js/yss/article.js"></script>

    <%--分页插件--%>
    <link type="text/css" href="/loginBack/bs_pagination/jquery.bs_pagination.min.css">
    <script src="/loginBack/bs_pagination/en.js"></script>
    <script src="/loginBack/bs_pagination/jquery.bs_pagination.min.js"></script>
</head>
<body>
<div class="header">
</div>
<header class="gird-header">
    <div class="header-fixed">
        <div class="header-inner">
            <a href="javascript:void(0)" class="header-logo" id="logo">Mr.liu</a>
            <nav class="nav" id="nav">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="article.jdp">博客</a></li>
                    <li><a href="message.html">留言</a></li>
                    <li><a href="diary.html">日记</a></li>
                    <li><a href="link.html">友链</a></li>
                </ul>
            </nav>
            <a href="/User/QQLogin" class="blog-user">
                <i class="fa fa-qq"></i>
            </a>
            <a class="phone-menu">
                <i></i>
                <i></i>
                <i></i>
            </a>
        </div>
    </div>
</header>
<div class="doc-container" id="doc-container">
    <div class="container-fixed">
        <div class="col-content">
            <div class="inner">
                <article class="article-list bloglist" id="LAY_bloglist">
                    <%--                    <section class="article-item zoomIn article">
                                            <div class="fc-flag">置顶</div>
                                            <h5 class="title">
                                                <span class="fc-blue">【原创】</span>
                                                <a href="read.html">Java学习路线推荐</a>
                                            </h5>
                                            <div class="time">
                                                <span class="day">1</span>
                                                <span class="month fs-18">7<span class="fs-14">月</span></span>
                                                <span class="year fs-18 ml10">2020</span>
                                            </div>
                                            <div class="content">
                                                <a href="read.html" class="cover img-light">
                                                    <img src="http://www.lzqcode.com/images/java.jpg">
                                                </a>
                                                这篇文章是为了介绍自己自学用过的Java视频资料。本套整合教程总共180+G，共450+小时。考虑到绝大部分视频至少要看两遍，而且视频总时长并不代表学习时长，所以零基础初学者总学习时间大约为：600小时视频时长
                                                + 100小时理解 +
                                                100小时练习，至少需要800小时。你可能觉得自己能一天学习8小时，实际上平均下来每天能学4小时都算厉害了。总会有各种原因，比如当天内容太难，公司聚会，要出差等等。如果周末你也是坚持学习，那么最理想状况下，6个半月就可以学完，达到工作后能被人带的水平。但我知道那其实基本不可能。
                                            </div>
                                            <div class="read-more">
                                                <a href="read.html" class="fc-black f-fwb">继续阅读</a>
                                            </div>
                                            <aside class="f-oh footer">
                                                <div class="f-fl tags">
                                                    <span class="fa fa-tags fs-16"></span>
                                                    <a class="tag">java路线</a>
                                                </div>
                                                <div class="f-fr">
                                                    <span class="read">
                                                        <i class="fa fa-eye fs-16"></i>
                                                        <i class="num">213</i>
                                                    </span>
                                                    <span class="ml20">
                                                        <i class="fa fa-comments fs-16"></i>
                                                        <a href="javascript:void(0)" class="num fc-grey">1</a>
                                                    </span>
                                                </div>
                                            </aside>
                                        </section>--%>
                </article>
            </div>
        </div>
        <div class="col-other">
            <div class="inner">
                <div class="other-item" id="categoryandsearch">
                    <div class="search">
                        <label class="search-wrap">
                            <input type="text" id="searchtxt" placeholder="输入关键字搜索"/>
                            <span class="search-icon">
					                <i class="fa fa-search" onclick="searchSelect()"></i>
					            </span>
                        </label>
                        <ul class="search-result"></ul>
                    </div>
                    <ul class="category mt20" id="category">
                        <li data-index="0" class="slider"></li>
                        <li data-index="1"><a href="/Blog/Article">全部文章</a></li>
                        <%--    <li data-index="2"><a href="/Blog/Article/1/article.jdp">Java</a></li>
                            <li data-index="3"><a href="/Blog/Article/2/article.jdp">前端</a></li>
                            <li data-index="4"><a href="/Blog/Article/3/article.jdp">Python</a></li>
                            <li data-index="5"><a href="/Blog/Article/4/article.jdp">PHP</a></li>
                            <li data-index="6"><a href="/Blog/Article/5/article.jdp">其它</a></li>--%>
                    </ul>
                </div>
                <!--右边悬浮 平板或手机设备显示-->
                <div class="category-toggle"><i class="layui-icon">&#xe603;</i></div>
                <div class="article-category">
                    <div class="article-category-title">分类导航</div>
                    <a href="/Blog/Article/1/">Java</a>
                    <a href="/Blog/Article/2/">前端</a>
                    <a href="/Blog/Article/3/">Python</a>
                    <a href="/Blog/Article/4/">PHP</a>
                    <a href="/Blog/Article/5/">其它</a>
                    <div class="f-cb"></div>
                </div>
                <!--遮罩-->
                <div class="blog-mask animated layui-hide"></div>
                <div class="other-item">
                    <h5 class="other-item-title">热门文章</h5>
                    <div class="inner">
                        <ul class="hot-list-article">
                            <li><a href="/Blog/Read/9">SpringBoot 入门爬虫项目实战</a></li>
                            <li><a href="/Blog/Read/12">SpringBoot 2.x 教你快速入门</a></li>
                            <li><a href="/Blog/Read/13">java学习路线</a></li>
                            <li><a href="/Blog/Read/4">基于SpringBoot+JWT+Redis跨域单点登录的实现</a></li>
                            <li><a href="/Blog/Read/7">SpringBoot 中如何使用SwaggerAPI接口文档？</a></li>
                            <li><a href="/Blog/Read/11">小白轻松入门Redis</a></li>
                            <li><a href="/Blog/Read/14">微信一键登录功能的实现</a></li>
                            <li><a href="/Blog/Read/8">NPOI导入导出Excel</a></li>
                        </ul>
                    </div>
                </div>
                <div class="other-item">
                    <h5 class="other-item-title">置顶推荐</h5>
                    <div class="inner">
                        <ul class="hot-list-article">
                            <li><a href="/Blog/Read/16">java学习路线</a></li>
                            <li><a href="/Blog/Read/14">基于SpringBoot+JWT+Redis跨域单点登录的实现</a></li>
                            <li><a href="/Blog/Read/9">小白轻松入门Redis</a></li>
                        </ul>
                    </div>
                </div>
                <div class="other-item">
                    <h5 class="other-item-title">最近访客</h5>
                    <div class="inner">
                        <dl class="vistor">
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/72388EA977643E8F97111222675720B1/100"><cite>Anonymous</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/342F777E313DDF5CCD6E3E707BB0770B/100"><cite>Dekstra</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/EA5D00A72C0C43ECD8FC481BD274DEEC/100"><cite>惜i</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/EF18CEC98150D2442183AA30F05AAD7B/100"><cite>↙Aㄨ计划
                                ◆莪↘</cite></a></dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/3D8D91AD2BAFD36F5AC494DA51E270E6/100"><cite>.</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/B745A110DAB712A0E6C5D0B633E905D3/100"><cite>Lambert.</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/E9BA3A2499EC068B7917B9EF45C4D13C/100"><cite>64ღ</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/09F92966169272DD7DD9999E709A0204/100"><cite>doBoor</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/59991D53192643A1A651383847332EB6/100"><cite>毛毛小妖</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/FF34F311DDC43E2AF63BE897BCA24F05/100"><cite>NULL</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/59AA25A7627284AE62C8E6EBDC6FE417/100"><cite>吓一跳</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/28B021E0F5AF0A4B9B781A24329FE897/100"><cite>如初</cite></a>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="footer-fixed">
    <div>
        <nav aria-label="...">
            <ul class="pager">
                <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span>上一页</a></li>
                <li class="next"><a href="javascript:nextSelect()">下一页<span aria-hidden="true">&rarr;</span></a></li>
            </ul>
        </nav>
    </div>
</footer>
<footer class="grid-footer">
    <div class="footer-fixed">
        <div class="copyright">
            <div class="info">
                <div class="contact">
                    <a href="javascript:void(0)" class="github" target="_blank"><i class="fa fa-github"></i></a>
                    <a href="https://wpa.qq.com/msgrd?v=3&uin=930054439&site=qq&menu=yes" class="qq" target="_blank"
                       title="930054439"><i class="fa fa-qq"></i></a>
                    <a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=gbiysbG0tbWyuMHw8K-i7uw"
                       class="email" target="_blank" title="930054439@qq.com"><i class="fa fa-envelope"></i></a>
                    <a href="javascript:void(0)" class="weixin"><i class="fa fa-weixin"></i></a>
                </div>
                <p class="mt05">
                    Copyright &copy; 2019-2020 ZQ博客 All Rights Reserved V.3.1.3 Power by ZQ博客
                </p>
            </div>
        </div>
    </div>
</footer>


<script>
    //回到顶部
    NProgress.start();
    //初始化加载
    window.onload = function () {
        NProgress.done();
    }


    //查询文章标题
    selectTitle();
    //调用分页查询方法
    pageSelect(1, 3);
    //调用下一页
    nextSelect()
    //下一页
    function nextSelect() {
        //清空当前页
        $('#LAY_bloglist').html('');
       //调用分页查询函数


    }
    //分页查询
    function pageSelect(page, pageSize) {
        var pageData = {
            'page': page,
            'pageSize': pageSize
        }
        //发送Ajax请求查询所有文章
        $.post("/blog/pageSelect", pageData, function (data) {
            var blogs = data.list;
            for (var i = 0; i < blogs.length; i++) {
                var blogArticle = blogs[i]
                //拼接文章
                $('#LAY_bloglist').append("<section class=\"article-item zoomIn article\">       \n" +
                    "\t\t\t\t\t\t\t<div class=\"fc-flag\">置顶</div>   \n" +
                    "\t\t\t\t\t\t\t<h5 class=\"title\">       \n" +
                    "\t\t\t\t\t\t\t\t<span class=\"fc-blue\">【原创】</span>       \n" +
                    "\t\t\t\t\t\t\t\t<a href=\"read.html\">" + blogArticle.title + "</a>   \n" +
                    "\t\t\t\t\t\t\t</h5>   \n" +
                    "\t\t\t\t\t\t\t<div class=\"time\">       \n" +
                    "\t\t\t\t\t\t\t\t<span class=\"day\">1</span>       \n" +
                    "\t\t\t\t\t\t\t\t<span class=\"month fs-18\">7<span class=\"fs-14\">月</span></span>       \n" +
                    "\t\t\t\t\t\t\t\t<span class=\"year fs-18 ml10\">2020</span>   \n" +
                    "\t\t\t\t\t\t\t</div>   \n" +
                    "\t\t\t\t\t\t\t<div class=\"content\">       \n" +
                    "\t\t\t\t\t\t\t\t<a href=\"read.html\" class=\"cover img-light\">           \n" +
                    "\t\t\t\t\t\t\t\t\t<img src=\'" + blogArticle.logo + "\'>       \n" +
                    "\t\t\t\t\t\t\t\t</a>\n" +
                    "\t\t\t\t\t\t\t\t" + blogArticle.digest + "\n" +
                    "\t\t\t\t\t\t\t</div>   \n" +
                    "\t\t\t\t\t\t\t<div class=\"read-more\">       \n" +
                    "\t\t\t\t\t\t\t\t<a href=\"read.html\" class=\"fc-black f-fwb\">继续阅读</a>   \n" +
                    "\t\t\t\t\t\t\t</div>    \n" +
                    "\t\t\t\t\t\t\t<aside class=\"f-oh footer\">       \n" +
                    "\t\t\t\t\t\t\t\t<div class=\"f-fl tags\">           \n" +
                    "\t\t\t\t\t\t\t\t\t<span class=\"fa fa-tags fs-16\"></span>           \n" +
                    "\t\t\t\t\t\t\t\t\t<a class=\"tag\">java路线</a>       \n" +
                    "\t\t\t\t\t\t\t\t</div>       \n" +
                    "\t\t\t\t\t\t\t\t<div class=\"f-fr\">           \n" +
                    "\t\t\t\t\t\t\t\t\t<span class=\"read\">               \n" +
                    "\t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-eye fs-16\"></i>               \n" +
                    "\t\t\t\t\t\t\t\t\t\t<i class=\"num\">213</i>           \n" +
                    "\t\t\t\t\t\t\t\t\t</span>           \n" +
                    "\t\t\t\t\t\t\t\t\t<span class=\"ml20\">               \n" +
                    "\t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-comments fs-16\"></i>               \n" +
                    "\t\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0)\" class=\"num fc-grey\">1</a>           \n" +
                    "\t\t\t\t\t\t\t\t\t</span>       \n" +
                    "\t\t\t\t\t\t\t\t</div>   \n" +
                    "\t\t\t\t\t\t\t</aside>\n" +
                    "\t\t\t\t\t\t</section>")
            }
        }, 'json');
    }


    //查询文章标题函数
    function selectTitle() {
        //发送Ajax请求
        $.post("/blog/selectTitle", function (data) {
            for (var i = 0; i < data.length; i++) {
                var titleList = data[i];
                $('#category').append("<li data-index=\"2\"><a href=\"/Blog/Article/1/article.jdp\">" + titleList.cname + "</a></li>")
            }
        }, 'json')
    }

</script>
</body>
</html>
